<template>
  <div class="delivery-way fixed left-0 right-0 top-0 bg-hex-ffffff" :class="{ '!bg-hex-f5f5f5': title==='登录' }">
    <div class="box-bg">
      <div class="relative z-999 flex items-center px-24rpx pb-40rpx"
           :style="{ paddingTop: `${searchBarTop}px` }"
           @click.stop="goBack">
        <uni-icons type="back" size="28" />
        <div v-if="left" class="text-36rpx font-600">{{ title }}</div>
        <div
          v-if="!left"
          class="absolute left-0 top-0 w-100% text-center text-36rpx font-600 leading-28px"
          :style="{ paddingTop: `${searchBarTop}px` }"
        >{{ title }}</div>
      </div>
    </div>
  </div>
  <div :style="{ height: `${height}px` }" />
</template>

<script lang="ts" setup>
const props = defineProps({
  title: { type: String, required: true, default: '' },
  left: { type: Boolean, required: false, default: false },
})
let searchBarTop: any = $ref('24')
let height: any = $ref('0')
onLoad(() => {
  // #ifndef H5
  let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
  searchBarTop = menuButtonInfo.top
  height = Number(searchBarTop) + 50
  // #endif
})
const goBack = () => {
  if (props.title === '支付') {
    uni.navigateTo({
      url: '/pages-mine/order?appType=2',
    })
    return
  } else if (props.title === '订单详情') {
    uni.navigateTo({
      url: '/pages-mine/order?appType=3',
    })
    return
  }
  uni.navigateBack({ delta: 1 })
}
</script>

